<template>
  <div class="grid-setting">
    <el-form ref="gridSetting" :model="gadgetSetting" label-position="top" style="height:auto;">

      <el-form-item label="formList">
        <el-select v-model="gadgetSetting.formCode" clearable filterable placeholder="Please select"  @change="changeFormData(gadgetSetting.formCode)" >
          <el-option v-for="(item,index) in formListData" :key="index" :label="item.formTitle" :value="item.formCode"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item  :label="$t('custom.reports.role')">
        <el-select    filterable
                      clearable
                      multiple
                      collapse-tags
                      default-first-option
                      :placeholder="$t('custom.dataset.role')"
                      v-model="gadgetSetting.roles">
          <el-option v-for="(item,index) in fullRoleList"
                    :key="index"
                    :label="item.name"
                    :value="item.roleId"></el-option>

        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import qs from 'qs'
export default {
  name: 'form-view-data-setting',
  data () {
    return {
      dataSource: [],
      dataSourceColumns: [],
      formListData: [],
      formDataArray: [],
      gadgetSetting: {
        headerTitle: '',
        headerDescription: '',
        drillThroughStatus: true,
        formCode: '',
        formTitle: '',
        formId: '',
        formSchema: {},
        formVersion: '',
        roles: []
      },
      roleList: [

      ],
      assignRoleList: []
    }
  },
  props: {
    dataInfo: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  watch: {
    data (value, oldValue) {
      return this.updateSetting(value)
    }
  },
  created () {
    if (this.data) {
      this.$set(this.data)
    }
    this.getJsonFormList(1)
    this.getRoleList()
    this.getAssignRoleList()
  },
  computed: {
    fullRoleList () {
      let roleTemp = []
      let assignTemp = []
      let temp = []
      this.roleList.forEach(ii => {
        roleTemp.push({
          roleId: ii.roleId,
          name: ii.name
        })
      })
      this.assignRoleList.forEach(it => {
        assignTemp.push({
          roleId: it.assignId,
          name: ''
        })
      })
      temp = this._.intersectionBy(roleTemp, assignTemp, 'roleId')

      return temp
    }

  },
  methods: {
    changeFormData (val) {
      if (val) {
        let result = this.formListData.find(e => e.formCode === val)
        this.$set(this.gadgetSetting, 'formCode', val)
        this.$set(this.gadgetSetting, 'formTitle', result.formTitle)
        this.$set(this.gadgetSetting, 'formId', result.id)
        this.$set(this.gadgetSetting, 'formSchema', result.formSchema)
        this.$set(this.gadgetSetting, 'formVersion', result.formVersion)
      } else {
        this.$set(this.gadgetSetting, 'formCode', '')
        this.$set(this.gadgetSetting, 'formTitle', '')
        this.$set(this.gadgetSetting, 'formId', '')
        this.$set(this.gadgetSetting, 'formSchema', {})
        this.$set(this.gadgetSetting, 'formVersion', '')
        this.$set(this.gadgetSetting, 'roles', [])
      }
      this.$forceUpdate()
    },

    getJsonFormList (currentPage) {
      const params = { current: currentPage, size: 9999, asc: 'form_title' }
      this.loading = true
      this.$interface.reports.getJsonFormListApi(params).then(({ data: res }) => {
        if (res.code !== 0) {
          this.loading = false
          return this.$message.error(res.msg)
        }
        this.formListData = res.data.records
        this.total = res.data.total
      }).catch(() => {
      })
    },
    getData () {
      return this.gadgetSetting
    },
    getRoleList () {
      const params = {
        tenantCode: this.$store.state.user.tenantCode
      }
      this.$interface.system.getClientRoleListApi(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.roleList = res.data
        }).catch(() => { })
    },
    getAssignRoleList () {
      let temp = []
      let roleList = this.$store.state.user.roleList
      roleList.forEach(it => {
        temp.push(it.id)
      })
      var params = qs.stringify({
        'roleId': temp
      }, { arrayFormat: 'repeat' })
      this.$interface.um.getAssignRoleList(params).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.assignRoleList = res.data
      })
    },
    updateSetting (value, list, layerStatus) {
      let gadgetSetting = {}
      this._.merge(this.gadgetSetting, value.gadgetSetting)

      this.$emit('update:data', this.gadgetSetting)
      return gadgetSetting
    }
  }
}
</script>

<style lang="scss">
.grid-setting {

    .column-card {
      margin-top: 8px;
    }
    .el-card__body {
      padding: 5px 20px !important;
    }
    .column-field {
      font-weight: bold;
    }
    .column-type {
      color: #9ea1a7;
    }
    .column-link {
      float: left;
      border: none;
      margin-left:3px
    }
    .el-form-item .el-form-item {
      margin-bottom: 4px;
    }
}

</style>
